{/* <template>
  <div class="home">
    <!-- 父容器高度 -->
    <div class="bscroll" ref="bscroll">
      <div>
        <div class="load" v-if="true">{{msg}}</div>
        <ul class="bscroll-container" @click="scroll">
          <li class="liload" v-if="loadshow">{{loadmsg}}</li>
          <li v-for="(item, index) in 18" :key="index">
            <span>{{index}}</span>
          </li>
        </ul>
        <div class="load" v-if="true">加载更多</div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "Home",
  data() {
    return {
      show: false,
      loadshow: false,
      loadmsg: "",
      msg: "下拉刷新"
    };
  },
  mounted() {
    setTimeout(() => {
      this._initScroll();
    }, 20);
  },
  methods: {
    _initScroll() {
      this.aBScroll = null;
      if (!this.$refs.bscroll) {
        return;
      }

      let bscrollDom = this.$refs.bscroll;
      this.aBScroll = new BScroll(bscrollDom, {
        probeType: 1,
        click: true
      });

      console.log(this.aBScroll);

      //派发事件
      this.aBScroll.on("scroll", pos => {
        // 你可以打印一下参数pos中都包含了什么！
        console.log("scroll", pos);
        if (pos.y > 20) {
          this.show = true;
        }
        if (pos.y > 70) {
          this.msg = "释放立刻刷新";
          console.log("下拉请求-->送开就请求的过度");
        }
      });

      this.aBScroll.on("touchEnd", pos => {
        // 你可以打印一下参数pos中都包含了什么！
        console.log("touchEnd", pos);
        this.show = false;
        if (pos.y > 50) {
          this.msg = "";
          this.loadmsg = "正在刷新中";
          this.loadshow = true;

          this.sleep(2000, () => {
            this.loadmsg = "刷新完成";
          });
          this.sleep(4000, () => {
            this.loadshow = false;
          });

          console.log("touchEnd请求");
        }
      });
    },

    sleep(time, cb) {
      return new Promise(resolve => {
        setTimeout(() => {
          cb();
        }, time);
      });
    },
    scroll() {
      console.log("点击");
      this.aBScroll.scrollToElement("li", 300);
    }
  }
};
</script>


<style scoped>
.bscroll {
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
}
.load {
  position: absolute;
  left: 0;
  top: -60px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #fff;
}
.liload {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: skyblue;
}
li {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 30px;
}
</style>



// beforeScrollStart -> 触发时机：滚动开始之前
// scrollStart -> 触发时机：滚动开始时
// scroll -> 触发时机：滚动过程中，具体时机取决于选项中的 probeType。
// scrollCancel -> 触发时机：滚动被取消。
// scrollEnd -> 触发时机：滚动结束。
// touchEnd -> 触发时机：鼠标/手指离开。 */}